import React from 'react';
import { Row, Col, Button } from 'antd';
import { connect } from 'dva';
import { StateType } from '@/common-typings';
import { mapStateToProps } from '../../utils';

class RiskUpdate extends React.Component<StateType> {
  public state = {
    needUpdateUser: '',
  };

  // 跳转到结果页面
  handleInquiryRiskResult = () => {
    this.props.dispatch({
      type: 'risk/updateRiskUserListEffect',
      payload: {
        usernames: this.state.needUpdateUser,
      },
      fn: this.props.toResultPage,
    });
    // this.props.toResultPage();
  };

  // 输入需要更新的账户名
  insertRiskUserNamesChange = (ev: StateType) => {
    // let value: string;
    // let valueArr: string[] = ev.target.value.split(',');
    // // 除去空字符串和首尾空格
    // valueArr = valueArr.filter((val: string) => val.trim() !== '');
    // valueArr = valueArr.map((val: string) => val.trim());
    // // eslint-disable-next-line prefer-const
    // value = valueArr.join(',');
    // this.setState({
    //   needUpdateUser: value,
    // });
    this.setState({
      needUpdateUser: ev.target.value.trim(),
    });
  };

  render() {
    return (
      <div>
        <Row gutter={21}>
          <Col span={6}>
            <div className="label">账户名:</div>
          </Col>
          <Col span={9}>
            <textarea
              // placeholder='多帐户名请以“,"做分隔'
              placeholder="每次只能更新一个账号"
              className="usernameInsertBox"
              onChange={this.insertRiskUserNamesChange}
            />
          </Col>
          <Col span={6}>
            <Button
              type="primary"
              className="inquiryBtn"
              onClick={this.handleInquiryRiskResult}
              disabled={!this.state.needUpdateUser}
            >
              查询
            </Button>
          </Col>
        </Row>
      </div>
    );
  }
}
// @ts-ignore
export default connect(mapStateToProps)(RiskUpdate);
